import { Button, Form, Input, Space } from "antd";
import "./index.scss";
import { useForm } from "antd/es/form/Form";
import { register, registerCaptcha } from "../../interfaces";
import { useNavigate, Link } from "react-router-dom";
import { GFS } from "@/hooks/useAssignGlobalProps";

export interface RegisterUser {
  username: string;
  nickname: string;
  password: string;
  confirmPassword: string;
  email: string;
  captcha: string;
}

const layout1 = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const layout2 = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24 },
};

export default function Register() {
  const [form] = useForm();
  async function sendCaptcha() {
    const address = form.getFieldValue("email");
    if (!address) {
      //触发表单验证email的规则
      form.validateFields(["email"]);
      return GFS.message.error("请输入邮箱地址");
    }
    const res = await registerCaptcha(address);
    if (res && [201,200].includes(res.status)) {
      GFS.message.success(res.data.message);
    }
  }
  const navigate = useNavigate()
  const onFinish = async (values: RegisterUser) => {
    if (values.password !== values.confirmPassword) {
      return GFS.message.error("两次密码不一致");
    }
    const res = await register(values);

    if (res.status === 201 || res.status === 200) {
      GFS.message.success("注册成功");
      const {username, password} = form.getFieldsValue() 
      setTimeout(() => {
        navigate(`/login?username=${username}&password=${password}`);
      }, 1000);
    } else {
      GFS.message.error(res.data.message || "系统繁忙，请稍后再试");
    }
  };

  return (
    <div id="register-container">
      <h1 className="mb-5 text-xl font-bold">jedi-admin</h1>
      <Form
        form={form}
        {...layout1}
        onFinish={onFinish}
        colon={false}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "请输入用户名!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="昵称"
          name="nickname"
          rules={[{ required: true, message: "请输入昵称!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="confirmPassword"
          rules={[{ required: true, message: "请输入确认密码!" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: "请输入邮箱!" },
            { type: "email", message: "请输入合法邮箱地址!" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="验证码"
          name="captcha"
          rules={[{ required: true, message: "请输入验证码!" }]}
        >
          <Space.Compact style={{ width: "100%" }}>
            <Input />
            <Button type="primary" onClick={sendCaptcha}>
              {" "}
              获取验证码{" "}
            </Button>
          </Space.Compact>
        </Form.Item>

        <Form.Item {...layout2}>
          <div className="links">
            已有账号？去<Link to="/login">登录</Link>
          </div>
        </Form.Item>

        <Form.Item {...layout1} label=" ">
          <Button className="btn" type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
